<template>
  <el-container>
    <el-header style="text-align: left; font-size: 26px">
      <el-page-header @back="goBack" content="产品详情"> </el-page-header>
    </el-header>

    <el-main>
      <ul style="list-style: none" class="infor">
        <li class="bg-red">
          <p>年化收益</p>
          <span
            ><strong>{{ detail.aagr }}</strong
            >%</span
          >
        </li>
        <li class="bg-purple">
          <p>投资周期</p>
          <span
            ><strong>{{ detail.term }}</strong
            >天</span
          >
        </li>
        <li class="bg-yellow">
          <p>起投金额</p>
          <span
            ><strong>{{ detail.goodsPrice/10000 }}</strong
            >万元</span
          >
        </li>
      </ul>
      <el-descriptions class="margin-top" :column="2" border>
        <el-descriptions-item>
          <template slot="label"> 发行银行 </template>
          三湘银行
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 认购币种 </template>
          人名币
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 发行地区 </template>
          湖南
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 产品类型 </template>
          人民币理财
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 对象 </template>
          货币市场，其他
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 收益获取方式 </template>
          不保本
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 申购条件 </template>
          未知 </el-descriptions-item
        ><el-descriptions-item>
          <template slot="label"> 提前终止条件 </template>
          未知
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 收益率说明 </template>
          预期最高收益为{{ detail.aagr }}%
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 商品类型 </template>
          <div v-if="detail.goodsType == 0">普通商品</div>
          <div v-else>秒杀商品</div>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 产品描述 </template>
          {{ detail.goodsDetail }}
        </el-descriptions-item>
      </el-descriptions>
    </el-main>
    <div class="buy">
      <el-button type="primary" class="buybtn">立即买入</el-button>
    <el-button type="primary" class="buybtn">立即卖出</el-button>
    </div>
  </el-container>
</template>

<script>

export default {
  name: "ProductDetail",
  data() {
    return {
      detail: {},
    };
  },
  created() {
    this.getGoods();
  },
  methods: {
    getGoods() {
      const routerGoods = this.$route.query.row;
      this.$http({
        method: "get",
        url: "/mall/goods/detail/" + routerGoods,
      }).then((resp) => {
        this.detail = resp.data;
        this.goodsPrice = resp.data.goodsPrice / 10000;
      });
    },
    goBack() {
      this.$router.push("/ProductList");
    },
  },
};
</script>

<style scoped>
.infor {
  height: 150px;
  padding-left: 20px;
}
.infor li {
  position: relative;
  float: left;
  width: 200px;
  height: 150px;
  border-radius: 5px;
  margin-left: 19px;
  text-align: center;
  color: #fff;
}
.infor li strong {
  font-size: 65px;
  font-weight: 500;
}
.infor li p {
  font-size: 20px;
}
.bg-red {
  background-color: #f07664;
}
.bg-purple {
  background: #c077db;
}
.bg-yellow {
  background: #eea96b;
}

.margin-top {
  text-align: center;
}
.buy{
  margin-top: 20px;
  text-align: center;
}
.buy .buybtn{
  width: 100px;
  height: 50px;
  font-size: 16px;
  margin-left: 50px;
}
</style>